<template>
  <div id="app">
    <!--头部-->
    <app-header :poiInfo="poiInfo"></app-header>

    <!--导航-->
    <app-nav :commentNum="commentNum"></app-nav>

    <!--内容-->
    <keep-alive> <!-- 这是个一个缓存标签，进入的所有页面都会被缓存，这样子不会每次都重复渲染页面 -->
      <router-view></router-view><!-- 这个是路由组件，有这个才会渲染不同的路由 -->
    </keep-alive>
  </div>
</template>

<script>
/** 头部插件 */
  import Header from "./components/header/Header"
/** 侧边栏插件 */
  import Nav from "./components/nav/Nav"

  export default {
    /** 组件名称 */
    name: 'App',
    /** 组件提供的数据 */
    data() {
      return {
        poiInfo: {},
        commentNum: 0
      }
    },
    /** 注册组件 */
    components: {
      /** 语法 key=>value */
      "app-header": Header,
      "app-nav": Nav
    },
    /** 生命周期函数 ，创建完成后执行 */
    created() {
      /** 使用了fetch方法，相当于ajax方法 请求接口 ，这是异步请求 */
      fetch("/api/goods")
        .then(res => res.json()) //JSON.parse() 字符串转对象 JSON.stringify()--对象转化为字符串
        .then(response => {
          if (response.code == 0) {
            /** 渲染商品数据 */
            this.poiInfo = response.data.poi_info
          }
        })

      fetch("/api/ratings")
        .then(res => res.json())
        .then(response => {
          if (response.code == 0) {
            /** 渲染评价数 */
            this.commentNum = response.data.comment_num
          }
        })
    }
  }
</script>

<style>

</style>
